<template>
  <page-header-wrapper :content="$t('permission.application.about')">
    <!-- drawer for add -->
    <div slot="extraContent">
      <a-button size="small" type="primary" @click="openAddForm">{{ $t('action.add') }}</a-button>
    </div>
    <!-- drawer for add -->
    <a-drawer width="650" :title="$t('permission.application.form.add')" :visible="addFormVisible" @close="closeAddForm">
      <PermissionApplicationAdd :origin="addFormOrigin" @update:submit="submitAddForm" @update:close="closeAddForm" />
    </a-drawer>
    <!-- drawer for edit -->
    <a-drawer width="650" :title="$t('permission.application.form.edit')" :visible="editFormVisible" @close="closeEditForm">
      <PermissionApplicationEdit :origin="editFormOrigin" @update:submit="submitEditForm" @update:close="closeEditForm" />
    </a-drawer>
    <!-- applications list -->
    <div class="table-list">
      <a-table
        rowKey="id"
        :columns="listColumns"
        :data-source="listItems"
        :loading="listLoading"
        :pagination="listPagination"
        @change="loadPaginator"
      >
        <div slot="status" slot-scope="item">
          <div v-if="item.status === 0"><span class="status-disabled"><a-icon type="warning" /> {{ $t('status.disable') }}</span></div>
          <div v-if="item.status === 1"><span class="status-enabled"><a-icon type="check" /> {{ $t('status.enabled') }}</span></div>
        </div>
        <div slot="action" slot-scope="item" class="action-list">
          <router-link :to="{name: 'PermissionsResource', query: {sid: item.id}}">{{ $t('action.resource') }}</router-link>
          <a-divider type="vertical" />
          <a v-if="item.status === 0" @click="openConfirmEnable(item)">{{ $t('action.enable') }}</a>
          <a v-if="item.status === 1" @click="openConfirmDisable(item)">{{ $t('action.disable') }}</a>
          <a-divider type="vertical" />
          <a @click="openEditForm(item)">{{ $t('action.edit') }}</a>
          <a-divider type="vertical" />
          <a @click="openConfirmDelete(item)">{{ $t('action.delete') }}</a>
        </div>
      </a-table>
    </div>
  </page-header-wrapper>
</template>

<script>
import { deletePermissionApplication, disablePermissionApplication, enablePermissionApplication, getPermissionApplication } from '@/api/v1'
import { Modal } from 'ant-design-vue'
import PermissionApplicationAdd from '@/views/v1/permissions/applications/Add.vue'
import PermissionApplicationEdit from '@/views/v1/permissions/applications/Edit.vue'

export default {
  components: { PermissionApplicationEdit, PermissionApplicationAdd },
  created () { this.loadList() },
  data () {
    return {
      addFormOrigin: { },
      addFormVisible: false,
      editFormOrigin: { },
      editFormVisible: false,
      listColumns: [
        { key: 'id', title: this.$t('permission.application.id'), dataIndex: 'id' },
        { key: 'status', title: this.$t('status'), scopedSlots: { customRender: 'status' } },
        { key: 'label', title: this.$t('permission.application.label'), dataIndex: 'label' },
        { key: 'action', scopedSlots: { customRender: 'action' } }
      ],
      listConditions: { page: 1, size: 25 },
      listItems: [],
      listLoading: false,
      listPagination: { current: 0, pageSize: 0, total: 0 },
      modal: null,
      modalOption: {
        cancelText: this.$t('action.close'),
        centered: true,
        destroyOnClose: true,
        okText: this.$t('action.ok'),
        okType: 'warning',
        parentContext: this
      }
    }
  },
  methods: {
    closeAddForm () { this.addFormVisible = false },
    closeEditForm () { this.editFormVisible = false },

    createModal (opt) {
      if (this.modal !== null) {
        this.modal.destroy()
      }
      this.modal = Modal.confirm(opt)
    },
    async loadList () {
      this.listLoading = true
      getPermissionApplication(this.listConditions, (res) => {
          // Fill with response list.
          this.listItems = res.data.body
          // Fill pagination.
          this.listPagination.current = res.data.paging.curr
          this.listPagination.pageSize = res.data.paging.size
          this.listPagination.total = res.data.paging.total
          // Condition filters.
          this.listConditions.page = this.listPagination.current
          this.listConditions.size = this.listPagination.pageSize
        }, () => {}, () => {
          this.listLoading = false
        }
      )
    },
    loadPaginator (v) {
      this.listConditions.page = v.current
      this.listConditions.size = v.pageSize
      this.loadList()
    },

    openAddForm () { this.addFormVisible = true },
    openConfirmDelete (item) {
      const opt = this.modalOption
      opt.title = this.$t('permission.application.confirm.delete')
      opt.content = this.$t('permission.application.confirm.delete.message', { label: item.label })
      opt.onOk = () => { this.sendDelete(item) }
      this.createModal(opt)
    },
    openConfirmDisable (item) {
      const opt = this.modalOption
      opt.title = this.$t('permission.application.confirm.disable')
      opt.content = this.$t('permission.application.confirm.disable.message', { label: item.label })
      opt.onOk = () => { this.sendDisable(item) }
      this.createModal(opt)
    },
    openConfirmEnable (item) {
      const opt = this.modalOption
      opt.title = this.$t('permission.application.confirm.enable')
      opt.content = this.$t('permission.application.confirm.enable.message', { label: item.label })
      opt.onOk = () => { this.sendEnable(item) }
      this.createModal(opt)
    },
    openEditForm (item) { this.editFormOrigin = item; this.editFormVisible = true },

    async sendDelete (item) {
      this.listLoading = true
      deletePermissionApplication({ id: item.id }, () => {
        this.$message.info(this.$t('permission.application.confirm.delete.success', { label: item.label }))
        this.listLoading = false
        this.loadList()
      }, (err) => {
        this.listLoading = false
        this.$message.error(err)
      })
    },
    async sendDisable (item) {
      this.listLoading = true
      disablePermissionApplication({ id: item.id }, () => {
        this.$message.info(this.$t('permission.application.confirm.disable.success', { label: item.label }))
        this.listLoading = false
        this.loadList()
      }, (err) => {
        this.listLoading = false
        this.$message.error(err)
      })
    },
    async sendEnable (item) {
      this.listLoading = true
      enablePermissionApplication({ id: item.id }, () => {
        this.$message.info(this.$t('permission.application.confirm.enable.success', { label: item.label }))
        this.listLoading = false
        this.loadList()
      }, (err) => {
        this.listLoading = false
        this.$message.error('' + err)
      })
    },

    submitAddForm () { this.closeAddForm(); this.loadList() },
    submitEditForm () { this.closeEditForm(); this.loadList() }
  }
}
</script>
